<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>参赛报名 - 数智化赋能"微情境·微宣讲"红色实践活动</title>
    <!-- 引入Swiper CSS -->
    <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
    <!-- 引入Tailwind CSS -->
    <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
    <!-- 引入Font Awesome -->
    <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <script>
        // 配置Tailwind自定义颜色（红色主题）
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#b71211', // 主红色
                        secondary: '#FFD700', // 辅助金色
                        red: {
                            700: '#B91C1C',    // 稍浅红色
                            800: '#991B1B',    // 深一点的红色
                            900: '#7F1D1D',    // 最深红色
                        }
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            /* 导航栏样式 */
            .nav-item {
                @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
            }
            .nav-item.active {
                @apply text-white;
            }
            .nav-icon {
                @apply text-lg mb-1;
            }
            .nav-text {
                @apply text-xs;
            }

            /* 表单样式 */
            .form-section {
                @apply bg-red-800 rounded-lg p-4 mb-4 border border-red-700;
            }
            .form-label {
                @apply block text-sm mb-2 font-medium;
            }
            .form-input {
                @apply w-full bg-red-900 border border-red-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-secondary;
            }
            .upload-area {
                @apply w-full bg-red-900/50 border-2 border-dashed border-red-700 rounded p-4 text-center cursor-pointer hover:border-secondary transition-colors;
            }
            .file-info {
                @apply text-xs text-gray-200 mt-1;
            }
        }
    </style>
</head>
<body class="bg-primary text-white">
<div class="max-w-md mx-auto min-h-screen flex flex-col">
    <!-- 页面标题 -->
    <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-between items-center">
        <a href="#" class="text-white"><i class="fa fa-arrow-left"></i></a>
        <h1 class="text-xl font-bold">参赛报名表</h1>
        <span class="w-6"></span> <!-- 占位，保持标题居中 -->
    </div>

    <!-- 页面内容区 -->
    <div class="flex-1 overflow-y-auto p-4 pb-24">
        <!-- 表单说明 -->
        <div class="form-section">
            <p class="text-sm text-gray-100">
                请准确填写以下信息并上传相关材料，带 <span class="text-secondary">*</span> 的为必填项
            </p>
        </div>

        <!-- 作品信息 -->
        <div class="form-section">
            <h2 class="text-lg font-bold mb-4 flex items-center">
                <i class="fa fa-pencil-square-o mr-2 text-secondary"></i>作品信息
            </h2>

            <!-- 作品名称 -->
            <div class="mb-4">
                <label class="form-label">
                    作品名称 <span class="text-secondary">*</span>
                </label>
                <input type="text" class="form-input" placeholder="请输入作品名称">
            </div>

            <!-- 作品封面 -->
            <div class="mb-4">
                <label class="form-label">
                    作品封面 <span class="text-secondary">*</span>
                </label>
                <div class="upload-area" id="coverUpload">
                    <input type="file" accept="image/*" class="hidden" id="coverFile">
                    <i class="fa fa-upload text-secondary text-xl mb-1"></i>
                    <p class="text-sm">点击上传作品封面图</p>
                    <p class="file-info">支持JPG、PNG格式，建议尺寸1080×720</p>
                </div>
            </div>

            <!-- 作品简介 -->
            <div class="mb-4">
                <label class="form-label">
                    作品简介 <span class="text-secondary">*</span>
                </label>
                <textarea
                        class="form-input h-24 resize-none"
                        placeholder="请简要介绍您的作品，字数100字以内"
                        maxlength="100"
                ></textarea>
                <div class="text-right text-xs text-gray-300 mt-1">
                    <span id="wordCount">0</span>/100
                </div>
            </div>

            <!-- 联系人 -->
            <div class="mb-4">
                <label class="form-label">
                    联系人 <span class="text-secondary">*</span>
                </label>
                <input type="text" class="form-input" placeholder="请输入联系人姓名">
            </div>
        </div>

        <!-- 作品文件上传 -->
        <div class="form-section">
            <h2 class="text-lg font-bold mb-4 flex items-center">
                <i class="fa fa-file-text-o mr-2 text-secondary"></i>作品文件上传
            </h2>

            <!-- 微情景剧本 -->
            <div class="mb-4">
                <label class="form-label">
                    微情景剧本 <span class="text-secondary">*</span>
                </label>
                <div class="upload-area" id="scriptUpload">
                    <input type="file" accept=".doc,.docx" class="hidden" id="scriptFile">
                    <i class="fa fa-upload text-secondary text-xl mb-1"></i>
                    <p class="text-sm">点击上传微情景剧本</p>
                    <p class="file-info">Word文档（.doc/.docx），不超过20MB</p>
                </div>
            </div>

            <!-- 微情境视频 -->
            <div class="mb-4">
                <label class="form-label">
                    微情境视频 <span class="text-secondary">*</span>
                </label>
                <div class="upload-area" id="video1Upload">
                    <input type="file" accept=".mp4" class="hidden" id="video1File">
                    <i class="fa fa-upload text-secondary text-xl mb-1"></i>
                    <p class="text-sm">点击上传微情境视频</p>
                    <p class="file-info">3-5分钟，MP4格式，分辨率不低于1080P，500MB以下</p>
                </div>
            </div>

            <!-- 微宣讲视频 -->
            <div class="mb-4">
                <label class="form-label">
                    微宣讲视频 <span class="text-secondary">*</span>
                </label>
                <div class="upload-area" id="video2Upload">
                    <input type="file" accept=".mp4" class="hidden" id="video2File">
                    <i class="fa fa-upload text-secondary text-xl mb-1"></i>
                    <p class="text-sm">点击上传微宣讲视频</p>
                    <p class="file-info">3-5分钟，MP4格式，分辨率不低于1080P，500MB以下</p>
                </div>
            </div>

            <!-- 宣讲文稿 -->
            <div class="mb-4">
                <label class="form-label">
                    宣讲文稿 <span class="text-secondary">*</span>
                </label>
                <div class="upload-area" id="speechUpload">
                    <input type="file" accept=".doc,.docx" class="hidden" id="speechFile">
                    <i class="fa fa-upload text-secondary text-xl mb-1"></i>
                    <p class="text-sm">点击上传宣讲文稿</p>
                    <p class="file-info">Word文档（.doc/.docx），不超过20MB</p>
                </div>
            </div>

            <!-- 其他附件 -->
            <div class="mb-4">
                <label class="form-label">
                    其他附件
                </label>
                <div class="upload-area" id="otherUpload">
                    <input type="file" accept=".doc,.docx,.ppt,.pptx,.zip,.rar" class="hidden" id="otherFile">
                    <i class="fa fa-upload text-secondary text-xl mb-1"></i>
                    <p class="text-sm">点击上传其他附件（可选）</p>
                    <p class="file-info">支持word、ppt、zip等格式，不超过50MB</p>
                </div>
            </div>
        </div>

        <!-- 免责声明 -->
        <div class="form-section">
            <div class="flex items-start mb-2">
                <input type="checkbox" id="agreement" class="mt-1 mr-2">
                <label for="agreement" class="text-sm">
                    我已阅读并同意<a href="/h5/index_mianze" class="text-secondary">《参赛作品免责声明》</a>，确认所提交的作品为原创作品，不侵犯任何第三方权益，如违反上述承诺，愿意承担相应法律责任。<span class="text-secondary">*</span>
                </label>
            </div>
        </div>

        <!-- 提交按钮 -->
        <div class="pt-2">
            <button id="submitBtn" class="w-full bg-secondary text-red-900 py-3 rounded font-medium text-sm opacity-50 cursor-not-allowed">
                提交报名
            </button>
        </div>
    </div>

    <!-- 底部固定导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
        <a href="/h5/index" class="nav-item active flex-1">
            <i class="nav-icon fa fa-home"></i>
            <span class="nav-text">首页</span>
        </a>
        <a href="/h5/index_huodong" class="nav-item flex-1">
            <i class="nav-icon fa fa-calendar"></i>
            <span class="nav-text">活动</span>
        </a>
        <a href="/h5/index_paihangbang" class="nav-item flex-1">
            <i class="nav-icon fa fa-bar-chart"></i>
            <span class="nav-text">排行榜</span>
        </a>
        <a href="/h5/index_yonghu" class="nav-item flex-1">
            <i class="nav-icon fa fa-user"></i>
            <span class="nav-text">我的</span>
        </a>
    </div>
</div>
<script src="../templates/h5/assets/jquery.min.js"></script>
<script src="../templates/h5/assets/aliyun-oss-sdk-6.18.0.min.js"></script>
<script src="../templates/h5/assets/vconsole.min.js"></script>
<script src="../templates/h5/assets/ossUpload.js"></script>
<script>
    // var vConsole = new VConsole();
    // console.log('Hello world');
</script>

<script>
    // 1. 全局存储：只存关键OSS地址，减少数据复杂度
    let fileUrls = {
        cover: '', script: '', video1: '', video2: '', speech: '', other: ''
    };
    // 2. 定位工具：打印当前触发的元素，方便排查重复绑定
    function logEvent(el, msg) {
        console.log(`[${new Date().getTime()}] ${msg}`, el);
    }

    $(function() {
        // -------------------------- 基础功能：字数统计 --------------------------
        const $intro = $('textarea[maxlength="100"]');
        $intro.on('input', function() {
            logEvent(this, '简介输入触发');
            $('#wordCount').text($(this).val().length);
            updateSubmitBtn(); // 仅输入时触发，无循环
        });

        // -------------------------- 核心功能：文件上传 --------------------------
        // 封面上传（每个上传区域单独写，避免循环调用）
        bindSingleUpload('#coverUpload', '#coverFile', function(url) {
            fileUrls.cover = url;
            updateSubmitBtn();
        });
        // 剧本上传
        bindSingleUpload('#scriptUpload', '#scriptFile', function(url) {
            fileUrls.script = url;
            updateSubmitBtn();
        });
        // 微情境视频
        bindSingleUpload('#video1Upload', '#video1File', function(url) {
            fileUrls.video1 = url;
            updateSubmitBtn();
        });
        // 微宣讲视频
        bindSingleUpload('#video2Upload', '#video2File', function(url) {
            fileUrls.video2 = url;
            updateSubmitBtn();
        });
        // 宣讲文稿
        bindSingleUpload('#speechUpload', '#speechFile', function(url) {
            fileUrls.speech = url;
            updateSubmitBtn();
        });
        // 其他附件
        bindSingleUpload('#otherUpload', '#otherFile', function(url) {
            fileUrls.other = url;
            updateSubmitBtn();
        });

        // -------------------------- 提交控制：按钮状态 --------------------------
        $('#agreement').on('change', function() {
            logEvent(this, '免责声明勾选触发');
            updateSubmitBtn();
        });

        // -------------------------- 最终提交：表单提交 --------------------------
        $('#submitBtn').on('click', function() {
            // if ($(this).hasClass('cursor-not-allowed')) {
            //     logEvent(this, '提交按钮被禁用，点击无效');
            //     return;
            // }
            submitFinalData();
        });
    });

    /**
     * 单个上传区域绑定（完全独立，无递归）
     * @param areaSelector 上传区域选择器（如#coverUpload）
     * @param fileSelector 文件输入框选择器（如#coverFile）
     * @param callback 上传成功后的回调（返回accessUrl）
     */
    function bindSingleUpload(areaSelector, fileSelector, callback) {
        const $area = $(areaSelector);
        const $file = $(fileSelector);
        const $tip = $area.find('p:eq(1)'); // 状态提示文本

        // 1. 点击区域触发文件选择（只绑定1次，用one避免重复）
        $area.one('click', function(e) {
            logEvent(this, '上传区域首次点击');
            e.stopImmediatePropagation(); // 阻止其他点击事件
            $file.click();
        });

        // 2. 文件选择后上传（只绑定1次）
        $file.one('change', function(e) {
            logEvent(this, '文件选择触发');
            const file = e.target.files[0];
            if (!file) return;

            $tip.text('⌛ 上传中...');
            // 调用上传接口
            const formData = new FormData();
            formData.append('file', file);

            $.ajax({
                url: '/oss/upload', // 务必确认后端接口地址正确
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                timeout: 120000, // 视频上传超时设为2分钟
                success: function(res) {
                    logEvent(file, '文件上传成功');
                    if (res && res.accessUrl) {
                        $tip.text('✅ 已上传：' + file.name);
                        callback(res.accessUrl); // 只传必要的url，减少数据
                    } else {
                        $tip.text('❌ 格式错误，无访问地址');
                    }
                },
                error: function(xhr, status) {
                    logEvent(file, `上传失败：${status}`);
                    $tip.text(`❌ 失败：${status === 'timeout' ? '超时' : '网络错'}`);
                }
            });
        });
    }

    /**
     * 更新提交按钮状态（极简判断，无复杂逻辑）
     */
    function updateSubmitBtn() {
        logEvent('#submitBtn', '开始检查按钮状态');
        // 1. 检查文本必填项（只查一次，避免重复获取DOM）
        const name = $('input[placeholder="请输入作品名称"]').val().trim();
        const intro = $('textarea[maxlength="100"]').val().trim();
        const contact = $('input[placeholder="请输入联系人姓名"]').val().trim();
        // 2. 检查必传文件（只判断url是否有值）
        const hasFiles = fileUrls.cover && fileUrls.script && fileUrls.video1 && fileUrls.video2 && fileUrls.speech;
        // 3. 检查免责声明
        const isAgree = $('#agreement').is(':checked');

        // const canSubmit = true;
            // 所有条件满足则启用按钮
        const canSubmit = name && intro && contact && hasFiles && isAgree;
        if (canSubmit) {
            $('#submitBtn').removeClass('opacity-50 cursor-not-allowed');
        } else {
            $('#submitBtn').addClass('opacity-50 cursor-not-allowed');
        }
        logEvent('#submitBtn', `按钮状态更新：${canSubmit ? '可提交' : '禁用'}`);
    }

    /**
     * 最终提交表单（极简数据，避免冗余）
     */
    function submitFinalData() {
        logEvent('#submitBtn', '开始提交表单');
        // 组装最小化提交数据（与后端CompWork字段严格对应）
        const data = {
            workName: $('input[placeholder="请输入作品名称"]').val().trim(),
            workIntro: $('textarea[maxlength="100"]').val().trim(),
            contactName: $('input[placeholder="请输入联系人姓名"]').val().trim(),
            // 只传OSS访问地址（如果后端需要objectKey，再从上传接口加回来）
            workCover: fileUrls.cover,
            workScript: fileUrls.script,
            workVideo1: fileUrls.video1,
            workVideo2: fileUrls.video2,
            workSpeech: fileUrls.speech,
            workOther: fileUrls.other
        };

        $.ajax({
            url: '/comp/work/add', // 务必确认后端接口地址正确
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json;charset=utf-8',
            beforeSend: function() {
                $('#submitBtn').text('提交中...').addClass('opacity-50 cursor-not-allowed');
            },
            success: function(res) {
                if (res && res.code == 0) {
                    alert('提交成功！');
                    window.location.href = '/h5/index';
                } else {
                    alert('提交失败，请完善并核对信息后重试～');
                    $('#submitBtn').text('提交报名').removeClass('opacity-50 cursor-not-allowed');
                }
            },
            error: function(xhr, status) {
                logEvent('#submitBtn', `提交报错：${status}`);
                alert('提交失败：网络错，请重试');
                $('#submitBtn').text('提交报名').removeClass('opacity-50 cursor-not-allowed');
            }
        });
    }
</script>
</body>
</html>